import QtQuick 2.0

Item {
    id: jiaojie
    width: 430
    height: 185

    property real currentAngle: 0
    property real maxAngle: 600
    property int offset:0
    property int rule_half_length: 105

    property string leftJiaojieSource: "qrc:/grader/imgs/jiaojie_left.png"
    property string rightJiaojieSource: "qrc:/grader/imgs/jiaojie_right.png"
    property string currentJiaojieSource: "qrc:/grader/imgs/jiaojie.png"
    property string scaleSource:  "qrc:/grader/imgs/jiaojie_rule.png"
    property string triangleSource:  "qrc:/grader/imgs/triangle.png"


    Rectangle{
        border.color: "#00FFFF"
        border.width: 2
        color: Qt.rgba(0, 0, 0, 0.25)
        radius: 13

        anchors.fill: parent
        //        Row{
        //            spacing: 20
        //            anchors.verticalCenter: parent.verticalCenter
        Image{
            id: leftJiaojieImg
            x: 21
            y: 27
            source: leftJiaojieSource
        }

        Canvas{
            id: canvas
            width: 238
            height: 185
            anchors.horizontalCenter: parent.horizontalCenter
            contextType: "2d";
            onPaint: {
                var ctx = getContext("2d")
                ctx.reset()

                ctx.save()
                ctx.drawImage(scaleSource,0,48)
                ctx.restore()

                ctx.save()
                ctx.drawImage(triangleSource, 90 + offset , 78)
                ctx.restore()

                ctx.save()
                ctx.drawImage(currentJiaojieSource, 97 + offset , 112)
                ctx.restore()
            }
            onImageLoaded: requestPaint()
            Component.onCompleted: {
                loadImage(currentJiaojieSource)
                loadImage(triangleSource)
            }
        }

        Image{
            id: rightJiaojieImg
            x: 363
            y: 27
            source: rightJiaojieSource
        }

    }

    onCurrentAngleChanged:
    {
        if(currentAngle < 0){
            currentAngle = 0
        }else if(currentAngle > maxAngle){
            currentAngle = maxAngle
        }
        var v = maxAngle/2 - currentAngle
        offset = v/(maxAngle/2)*rule_half_length
        // console.log(v, offset)

        canvas.requestPaint()
    }
}
